<!--这里只需要cnpm i weui.js --save即可
    样式需要额外cnpm i weui --save,然后import "weui/dist/style/weui.css"
-->
<template>
    <div>
        <button @click="handleClick1">actionSheet底部弹框(推荐使用)</button>
        <button @click="handleClick2">alert警告框</button>
        <button @click="handleClick3">confirm确认框(推荐使用)</button>
        <button @click="handleClick4">dialog对话框</button>
        <button @click="handleClick5">gallery带删除按钮的图片预览(推荐使用)</button>
        <button @click="handleClick6">loading等待框(推荐使用)</button>
        <button @click="handleClick7">picker选择框(推荐使用)</button>
        <button @click="handleClick8">toast提示框(推荐使用)</button>
        <button @click="handleClick9">topTip顶部报错提示</button>

        <!--滑块-->
        <div class="weui-slider-box">
            <div id="slider" class="weui-slider">
                <div class="weui-slider__inner">
                    <div class="weui-slider__track"></div>
                    <div class="weui-slider__handler"></div>
                </div>
            </div>
            <div id="sliderValue" class="weui-slider-box__value"></div>
        </div>

        <!--tab-->
        <div class="weui-tab" id="tab">
            <div class="weui-navbar">
                <div class="weui-navbar__item">反馈</div>
                <div class="weui-navbar__item">表单</div>
                <div class="weui-navbar__item">上传</div>
                <div class="weui-navbar__item">其它</div>
            </div>
            <div class="weui-tab__panel">
                <div class="weui-tab__content">反馈页</div>
                <div class="weui-tab__content">表单页</div>
                <div class="weui-tab__content">上传页</div>
                <div class="weui-tab__content">其它页</div>
            </div>
        </div>

        <!--上传-->
        <div class="weui-cells weui-cells_form" id="uploader">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">图片上传</p>
                            <div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" capture="camera" multiple="" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
    export default {
        name:'weuiJS',
        mounted(){
            //tab
            this.$weui.tab('#tab',{
                defaultIndex: 0,
                onChange: function(index){
                    console.log(index);
                }
            });
            //滑块
            this.$weui.slider('#slider', {
                step: 1,
                defaultValue: 40,
                onChange: function(percent){
                    console.log(percent);
                }
            });
            //上传
            this.uploadFile()
        },
        methods:{
            handleClick1(){
                this.$weui.actionSheet([
                    {
                        label: '拍照',
                        onClick: function () {
                            console.log('拍照');
                        }
                    }, {
                        label: '从相册选择',
                        onClick: function () {
                            console.log('从相册选择');
                        }
                    }, {
                        label: '其他',
                        onClick: function () {
                            console.log('其他');
                        }
                    }
                ], [
                    {
                        label: '取消',
                        onClick: function () {
                            console.log('取消');
                        }
                    }
                ], {
                    className: 'custom-classname',
                    onClose: function(){
                        console.log('关闭');
                    }
                });
            },
            handleClick2(){
                this.$weui.alert('自定义按钮的alert', {
                    title: '自定义按钮的alert',
                    buttons: [{
                        label: 'OK',
                        type: 'primary',
                        onClick: function(){ console.log('ok') }
                    }]
                });
            },
            handleClick3(){
                this.$weui.confirm('自定义按钮的confirm', {
                    title: '自定义按钮的confirm',
                    buttons: [{
                        label: 'NO',
                        type: 'default',
                        onClick: function(){ console.log('no') }
                    }, {
                        label: 'YES',
                        type: 'primary',
                        onClick: function(){ console.log('yes') }
                    }]
                });
            },
            handleClick4(){
                this.$weui.dialog({
                    title: 'dialog标题',
                    content: 'dialog内容',
                    className: 'custom-classname',
                    buttons: [{
                        label: '取消',
                        type: 'default',
                        onClick: function () { alert('取消') }
                    }, {
                        label: '确定',
                        type: 'primary',
                        onClick: function () { alert('确定') }
                    }]
                });

//                // 主动关闭(需要借助生命周期函数来操作)
//                var $dialog = weui.dialog({...});
//                $dialog.hide(function(){
//                    console.log('`dialog` has been hidden');
//                });
            },
            handleClick5(){
                //图片来源于后台，当然删除也要发起请求去删除
                let url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544502340712&di=3b0c20af62035b28ac969ed4b8220037&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ff2deb48f8c5494eec7036a5f20f5e0fe99257e56.jpg";
                let gallery = this.$weui.gallery(url, {
                    className: 'custom-classname',
                    onDelete: function(){
                        if(confirm('确定删除该图片？')){ console.log('删除'); }
                        gallery.hide(function() {
                            console.log('`gallery` has been hidden');
                        });
                    }
                });
            },
            handleClick6(){
                //请求之前提示等待
                let loading = this.$weui.loading('loading', {
                    className: 'custom-classname'
                });
                //请求之后消失等待
                setTimeout(function () {
                    loading.hide(function() {
                        console.log('`loading` has been hidden');
                    });
                }, 3000);
            },
            handleClick7(){
                // 多列picker：选中的是value,显示的是label
                this.$weui.picker([
                    {
                        label: '飞机票',
                        value: 0,
                        children: [
                            {
                                label: '经济舱',
                                value: 1
                            },
                            {
                                label: '商务舱',
                                value: 2
                            }
                        ]
                    },
                    {
                        label: '火车票',
                        value: 1,
                        children: [
                            {
                                label: '卧铺',
                                value: 1,
                                disabled: true // 不可用
                            },
                            {
                                label: '坐票',
                                value: 2
                            },
                            {
                                label: '站票',
                                value: 3
                            }
                        ]
                    },
                    {
                        label: '汽车票',
                        value: 3,
                        children: [
                            {
                                label: '快班',
                                value: 1
                            },
                            {
                                label: '普通',
                                value: 2
                            }
                        ]
                    }
                ], {
                    className: 'custom-classname',
                    container: 'body',
                    defaultValue: [1, 3],
                    onChange: function (result) {
                        console.log(result)
                    },
                    onConfirm: function (result) {
                        console.log(result)
                    },
                    id: 'doubleLinePicker'
                });
            },
            handleClick8(){
                this.$weui.toast('操作成功', {
                    duration: 3000,
                    className: 'custom-classname',
                    callback: function(){ console.log('close') }
                });
            },
            handleClick9(){
                this.$weui.topTips('请填写正确的字段', {
                    duration: 3000,
                    className: 'custom-classname',
                    callback: function(){ console.log('close') }
                });
            },
            uploadFile(){
                let uploadCount = 0;
                this.$weui.uploader('#uploader', {
                    url: 'http://localhost:8081',
                    auto: true,
                    type: 'file',
                    fileVal: 'fileVal',
                    compress: {
                        width: 1600,
                        height: 1600,
                        quality: .8
                    },
                    onBeforeQueued: function(files) {
                        // `this` 是轮询到的文件, `files` 是所有文件

                        if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
                            weui.alert('请上传图片');
                            return false; // 阻止文件添加
                        }
                        if(this.size > 10 * 1024 * 1024){
                            weui.alert('请上传不超过10M的图片');
                            return false;
                        }
                        if (files.length > 5) { // 防止一下子选择过多文件
                            weui.alert('最多只能上传5张图片，请重新选择');
                            return false;
                        }
                        if (uploadCount + 1 > 5) {
                            weui.alert('最多只能上传5张图片');
                            return false;
                        }

                        ++uploadCount;

                        // return true; // 阻止默认行为，不插入预览图的框架
                    },
                    onQueued: function(){
                        console.log(this);

                        // console.log(this.status); // 文件的状态：'ready', 'progress', 'success', 'fail'
                        // console.log(this.base64); // 如果是base64上传，file.base64可以获得文件的base64

                        // this.upload(); // 如果是手动上传，这里可以通过调用upload来实现；也可以用它来实现重传。
                        // this.stop(); // 中断上传

                        // return true; // 阻止默认行为，不显示预览图的图像
                    },
                    onBeforeSend: function(data, headers){
                        console.log(this, data, headers);
                        // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
                        // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部

                        // return false; // 阻止文件上传
                    },
                    onProgress: function(procent){
                        console.log(this, procent);
                        // return true; // 阻止默认行为，不使用默认的进度显示
                    },
                    onSuccess: function (ret) {
                        console.log(this, ret);
                        // return true; // 阻止默认行为，不使用默认的成功态
                    },
                    onError: function(err){
                        console.log(this, err);
                        // return true; // 阻止默认行为，不使用默认的失败态
                    }
                });
            }
        }
    }
</script>
<style scoped>

</style>